<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <el-row :gutter="15">
          <el-col :lg="9" :md="12">
            <el-form :model="where" ref="formData">
              <el-form-item label="选择时间:">
                <el-date-picker
                  v-model="where.record_date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-value="defaultValue"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :lg="5" :md="12">
            <el-form-item label="选择游戏:">
              <el-select
                filterable
                v-model="where.package_id"
                placeholder="请选择游戏包"
                :multiple="true"
                remote
                :remote-method="handleRemoteSearch"
              >
                <el-option
                  label="全选"
                  value="全选"
                  @click.native="selectAll"
                  v-if="package_id_list.length"
                ></el-option>
                <el-option
                  label="取消全选"
                  value="全选"
                  @click.native="selectAllCancel"
                  v-if="package_id_list.length"
                ></el-option>
                <el-option
                  v-for="item in package_id_list"
                  :key="item.id"
                  :label="item.package_name"
                  :value="item.id"
                >
                </el-option>
                <template slot="suffix">
                  <i
                    class="el-select__caret el-input__icon el-icon-arrow-down"
                  ></i>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="5" :md="12">
            <el-form-item label="选择渠道:">
              <el-select
                v-model="where.channel_id"
                placeholder="请选择渠道名称"
              >
                <el-option
                  v-for="item in channel_name_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :lg="5" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload"
                >查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ this.sumData.sum_amount ? this.sumData.sum_amount : 0 }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                总充值
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{
                  this.sumData.register_device
                    ? this.sumData.register_device
                    : 0
                }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                新增设备数
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{
                  this.sumData.register_user ? this.sumData.register_user : 0
                }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                新增用户数
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ this.sumData.login_user ? this.sumData.login_user : 0 }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                活跃用户数
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ this.sumData.login_device ? this.sumData.login_device : 0 }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                活跃设备
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{
                  this.sumData.register_play ? this.sumData.register_play : 0
                }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                新增角色
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="15" style="margin-top: 10px;margin-bottom: 10px;">
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ this.sumData.amount_user ? this.sumData.amount_user : 0 }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                付费用户数
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ calculatedValue }}

                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                付费率
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ arppuValue }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                ARPPU
              </div>
            </el-card>
          </el-col>
          <el-col :lg="4" :md="12">
            <el-card class="box-card" style="text-align: center;">
              <div class="text item" style="color: #1890ff;">
                {{ appuValue }}
                <!-- {{ "列表内容 " + o }} -->
              </div>
              <div class="text item">
                APPU
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="list"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 420px)"
        :need-page="false"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar"> </template>
        <!-- 状态列 -->
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>


export default {
  name: "flowStatistics",
  data() {
    return {
      // 表格数据接口
      // url: "/GameChannelStats/index",
      list:[],
      // 表格列配置
      columns: [
        {
          prop: "record_date",
          label: "日期",
          width: 150,
          align: "center",
          showOverflowTooltip: true
        },
        {
          prop: "channel_name",
          label: "渠道名称",
          width: 200,
          align: "center",
          showOverflowTooltip: true
        },
        {
          prop: "package_name",
          label: "游戏名称",
          width: 200,
          align: "center",
          showOverflowTooltip: true
        },
        {
          prop: "sum_amount",
          label: "总充值",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: "register_device",
          label: "新增设备数",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: "login_user",
          label: "活跃用户数",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: "login_device",
          label: "活跃设备数",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: "register_play",
          label: "新增角色数",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: "amount_user",
          label: "付费用户数",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          label: "付费率",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => {
            if (row.amount_user && row.login_user) {
              return (row.amount_user / row.login_user).toFixed(2);
            } else {
              return "0.00";
            }
          }
        },
        {
          label: "ARPPU",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => {
            if (row.sum_amount && row.amount_user) {
              return (row.sum_amount / row.amount_user).toFixed(2);
            } else {
              return "0.00";
            }
          }
        },
        {
          label: "APPU",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => {
            if (row.sum_amount && row.login_user) {
              return (row.sum_amount / row.login_user).toFixed(2);
            } else {
              return "0.00";
            }
          }
        }
        // {
        //   prop: "sex",
        //   label: "D2留存",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        // {
        //   prop: "sex",
        //   label: "D3留存",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        // {
        //   prop: "sex",
        //   label: "D7留存",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        // {
        //   prop: "sex",
        //   label: "D1LTV",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        // {
        //   prop: "sex",
        //   label: "D3LTV",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        // {
        //   prop: "sex",
        //   label: "D7LTV",
        //   align: "center",
        //   showOverflowTooltip: true,
        //   minWidth: 200
        // },
        // {
        //   columnKey: "action",
        //   label: "操作",
        //   width: 230,
        //   align: "center",
        //   resizable: false,
        //   slot: "action",
        //   fixed: "right"
        // }
      ],
      // 表格搜索条件
      where: { record_date: [] },
      sumData: [],
      channel_name_list: [],
      package_id_list: [],
      defaultValue: null,
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false
    };
  },
  computed: {
    timeDefault() {
      var date = new Date();
      var s1 =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return s1;
    },
    // 付费率
    calculatedValue() {
      if (this.sumData) {
        if (this.sumData.amount_user && this.sumData.login_user) {
          return (this.sumData.amount_user / this.sumData.login_user).toFixed(2);
        } else {
          return '0.00';
        }
      } else {
        return '0.00';
      }
    },
    // ARPPU
    arppuValue() {
      if (this.sumData) {
        if (this.sumData.sum_amount && this.sumData.amount_user) {
          return (this.sumData.sum_amount / this.sumData.amount_user).toFixed(2);
        } else {
          return '0.00';
        }
      } else {
        return '0.00';
      }
    },
    // APPU
    appuValue() {
      if (this.sumData) {
        if (this.sumData.sum_amount && this.sumData.login_user) {
          return (this.sumData.sum_amount / this.sumData.login_user).toFixed(2);
        } else {
          return '0.00';
        }
      } else {
        return '0.00';
      }
    }
  },
  created() {
    this.getChannelNameList();
    this.getPackageIdList();
    this.getSumData();
  },

  //页面加载时候，在mounted中进行赋值
  mounted() {
    // 初始化查询，默认为前一天
    this.$set(this.where.record_date, 0, this.timeDefault);
    this.$set(this.where.record_date, 1, this.timeDefault);
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ where: this.where });
      this.getSumData();
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    // 获取渠道
    getChannelNameList() {
      this.$http.post("/channel/index").then(res => {
        this.channel_name_list = res.data.data;
      });
    },
    // 获取游戏包
    getPackageIdList() {
      this.$http
        .post("/Package/getChannelPackage", { limit: 100, page: 1 })
        .then(res => {
          this.package_id_list = res.data.data;
        });
    },
    // 获取sum
    getSumData() {
      this.$http
        .post("/GameChannelStats/index", {
          record_date: this.where.record_date,
          package_id: this.where.package_id,
          channel_id: this.where.channel_id
        })
        .then(res => {
          this.sumData = res.data.all;
          this.list = res.data.data;
        });
    },
    // 全选
    selectAll() {
      let idList = [];
      this.package_id_list.forEach(item => {
        idList.push(item.id);
      });
      this.where.package_id = idList;
    },
    // 取消全选
    selectAllCancel() {
      this.where.package_id = [];
    },
    async handleRemoteSearch(query) {
      try {
        // 调用接口，传入输入的值作为参数
        const response = await this.fetchPackageList(query);
        // 更新下拉选择框的选项
        this.package_id_list = response.data.data;
      } catch (error) {
        console.error("获取输入搜索结果失败1", error);
      }
    },
    async fetchPackageList(query) {
      try {
        const response = await this.$http.post("/Package/getChannelPackage", {
          package_name: query,
          limit: 100,
          page: 1
        });
        return response; // 返回响应数据
      } catch (error) {
        console.error("获取输入搜索结果失败2", error);
        throw error; // 抛出错误
      }
    }
  }
};
</script>

<style scoped></style>
